<template>
	<view class="container">
		<view class="card-item">
			<view style="display: flex;align-items: center;margin-bottom: 1.5rem;gap:1rem">
				<view
					style="width: 5rem;height: 5rem;border-radius: 100%;overflow: hidden;border-width: 4px;border-color: rgb(37 99 235 / 0.2);">
					<image :src="mainStore().userInfo.avatar?mainStore().userInfo.avatar:avatar" mode="aspectFill"
						style="width: 100%;height: 100%;" />
				</view>
				<view class="">
					<h2>{{mainStore().userInfo.nickName?mainStore().userInfo.nickName:'城市环境守护者'}}</h2>
					<view style="color: #4b5563;font-size: 0.875rem;line-height: 1.25rem;">
						Phone:{{mainStore().userInfo.userName?mainStore().userInfo.userName:'-'}}
					</view>
					<view style="display: flex; align-items: center;margin-top: 0.5rem; background-color: #dbeafe;padding: 0.25rem 0.5rem;border-radius: 9999px;
					width: fit-content;color: #2563eb;font-size: 12px;">
						金牌守护者
					</view>

				</view>
			</view>
			<view class="info-row">
				<view class="info-item" style="background-color: #eff6ff;" @click="toRecord">
					<view class="info-item-line1">
						已经清理
					</view>
					<view class="info-item-line2">{{summaryMe.handleCount}}</view>
					<view class="info-item-line3">
						本周 --
					</view>
				</view>
				<view class="info-item" style="background-color: #f0fdf4;">
					<view class="info-item-line1">
						累计收入
					</view>
					<view class="info-item-line2">
						<text v-if="mainStore().token">¥{{ mainStore().userInfo.prize/100}}</text>
						<text v-else>--</text>
					</view>
					<view class="info-item-line3">
						本月+{{summaryMe.totalAuditPrize}}
					</view>
				</view>
				<view class="info-item" style="background-color: #faf5ff;">
					<view class="info-item-line1">
						合格率
					</view>
					<view class="info-item-line2">{{summaryMe.passRate}}%</view>

				</view>
			</view>
		</view>
		<view class="card-item" style="animation: slideUp 0.4s ease-out;animation-delay: 0.2s;">
			<view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;">
				<view style="font-size: 1.125rem;line-height: 1.75rem;font-weight: 600;">
					结算记录
				</view>
				<view style="font-size: 0.875rem;line-height: 1.25rem;color: #2563eb;" @click="toRewardRecord">查看全部
				</view>

			</view>
			<view
				style="max-height: 15rem;overflow-y: auto;scrollbar-width: none;display: flex;flex-direction: column;gap:16px">
				<!-- 结算记录项 -->
				<view style="background-color: #f9fafb;padding: 0.75rem;border-radius: 0.75rem;"
					v-for="(item,index) in rewardList" :key="index">
					<view style="display: flex;justify-content: space-between;align-items: center"
						class="flex justify-between">
						<view class="font-medium" style="font-weight: 500;">{{dayjs(item.createTime).year()}}-{{getWeekOfYear(item.createTime)}}周</view>
						<span style="color: #10b981;font-weight: 600;">+¥{{item.rewardAmount}} 分</span>
					</view>
					<view
						style="display: flex;justify-content: space-between;align-items: center;margin-top: 0.25rem;    color: #6b7280;">
						<span data-doubao-line="170">{{dayjs(item.rewardTime).format('YYYY-MM-DD HH:mm')}}</span>
						<span data-doubao-line="171">已结算</span>
					</view>
				</view>
				<l-empty v-if="!rewardList.length" description="空空如也" />

			</view>
		</view>
		<!-- <view class="card-item">

		</view> -->




		<view class="upload-btn" @tap="handleUpload">
			<uni-icons type="camera-filled" size="24" color="#FFFFFF" />
		</view>
	</view>
	<signview ref="getUserInfoRef" @success="getUserInfoSuc"></signview>

</template>
<script lang="ts" setup>
	import { resourcesPath } from '@/config/common.js'
	import { request } from '../../utils/api';
	import {
		mainStore
	} from '@/store/index.js';
	import { onMounted, ref } from 'vue';
	import { validateIsLogin } from '@/hooks/validateIsLogin.js'
		import {getWeekOfYear} from '../../utils/commonUtils.js'
	import {onShow} from '@dcloudio/uni-app'
	import dayjs from '@/utils/dayjs.main.js'
	const getUserInfoRef = ref(null)
	const { validateLogin } = validateIsLogin(getUserInfoRef)
	const avatar = resourcesPath + '/image/avatar.jpg';
	const taskArr = [
		{
			name: '清理小广告',
			reward: '奖励 2-5分/张',
			src: resourcesPath + '/image/task1.jpg'
		}
		// {
		// 	name: '清理墙面涂鸦',
		// 	reward: '奖励 5 元/处',
		// 	src: '/image/task2.jpg'
		// }
	]

	const openSQ = () => {
		getUserInfoRef.value.open(1)
	}
	const toRecord = () => {
		if (!validateLogin()) {
			return
		}
		uni.navigateTo({
			url: '/pages/record/record'
		})
	}
	const toRewardRecord = () => {
		if (!validateLogin()) {
			return
		}
		uni.navigateTo({
			url: '/pages/rewardRecords/rewardRecords'
		})
	}
	const handleUpload = () => {
		if (!mainStore().token) {
			openSQ()
			return
		}
		if (!validateLogin()) {
			return
		}
		uni.navigateTo({
			url: '/pages/upload/upload'
		})
	}
	const loginOut = () => {
		mainStore().loginOut()
	}
	//微信登录成功
	const getUserInfoSuc = () => {
		getTotal()
	}

	const summaryTotal = ref({
		handleCount: 0,
	})
	const rewardList = ref([])

	const summaryMe = ref({
		/** 清理次数 */
		"handleCount": 0,
		/** 清理招贴类型种类数 */
		"handlePosterType": 0,
		/** 清理街道数 */
		"handleStreet": 0,
		/** 清理街道办数 */
		"handleSubdistrict": 0,
		/**  完成审核的工单数*/
		"auditedCount": 0,
		/** 给付奖励的工单数 */
		"prizedCount": 0,
		/** 完成处理的工单数*/
		"treatedCount": 0,
		/** 审批后的奖励金额总额*/
		"totalAuditPrize": 0,
		/** 合格率*/
		"passRate": 0
	})
	const getTotal = () => {
		///admin/v1/summary:total
		if (!mainStore().token) {
			return
		}
		// mainStore().getUserInfo()
		// request({
		// 	url: '/sanitation/v1/me',
		// 	method: 'GET',
		// }).then(res => {
		// 	summaryTotal.value = res || {}

		// })
		//
		let queryData:any = {}
		queryData.userId = (mainStore().userInfo?.id??"")+""
		request({
			url: '/sanitation/v1/reward_records',
			method: 'GET',
			data: {
				page: 1,
				pageSize: 5,
				query:JSON.stringify(queryData)
			}
		}).then(res => {
			rewardList.value = res.items ?? []

		})
		request({
			url: `/sanitation/v1/summary:me/${dayjs().format('YYYY')}`,
			method: 'GET',
			// data: {
			// 	page: 1,
			// 	pageSize: 5
			// }
		}).then(res => {

			summaryMe.value = res

		})
	}


	onShow(async () => {
		if (mainStore().token) {
			await mainStore().getUserInfo();
			getTotal()
		}
	})
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.card-item {
		background-color: #fff;
		margin-left: 1rem;
		width: calc(100% - 4rem);
		padding: 1rem;
		margin-bottom: 2rem;
		border-radius: 1rem;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		gap: 0.75rem;

		.info-item {
			flex: 1;
			padding: 0.5rem;
			border-radius: 0.85rem;
			text-align: center;

			.info-item-line1 {
				font-size: 0.75rem;
				line-height: 1rem;
				margin-bottom: 0.25rem;
				color: #6b7280;
			}

			.info-item-line2 {
				font-weight: 700;
				font-size: 1.2rem;
				line-height: 1.5rem;
			}

			.info-item-line3 {
				margin-top: 0.25rem;
				font-size: 0.75rem;
				line-height: 1rem;
			}
		}

	}


	.info-row :nth-child(1) {


		.info-item-line2 {
			color: #2563eb;
		}

		.info-item-line3 {
			color: #2563eb;
		}
	}

	.info-row :nth-child(2) {


		.info-item-line2 {
			color: #10b981;
		}

		.info-item-line3 {
			color: #10b981;
		}

	}

	.info-row :nth-child(3) {


		.info-item-line2 {
			color: #9333ea;
		}

		.info-item-line3 {
			color: #9333ea;
		}
	}


	.upload-btn {
		position: fixed;
		right: 32rpx;
		bottom: 160rpx;
		width: 112rpx;
		height: 112rpx;
		border-radius: 56rpx;
		background-color: #2979ff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 8px rgba(41, 121, 255, 0.2);
	}

	.footer {
		padding: 30rpx;
		/* background: #ffffff; */
		flex-shrink: 0;
	}

	.primary-btn {
		background: #07c160;
		color: #ffffff;
		font-size: 16px;
		border-radius: 44rpx;
	}
</style>